<template>
    <div class="example" >
        <h5>pubilcSelect:</h5>
        <section class="select">
            <manage-public-select>
                <template slot="buttonSearch">
                    <el-button style="float: right;" >查询结果</el-button>
                </template>
                <template slot="searchContent">            
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-row>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作人员">
                                        <el-select v-model="form.region" placeholder="请选择所属机构" style="width:100%">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作日期">
                                        <el-date-picker v-model="form.date" type="date" placeholder="请选择操作日期"> </el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </manage-public-select>
            <ul class="explain">
                <li>manage-public-select</li>
                <li>section class="select"进行分类包裹</li>
                <li>slot="buttonSearch" 可以放置功能按钮</li>
                <li>slot="searchContent" 可以放置查询的内容</li>
                <li>el-row el-col 进行适应</li>
                <li>样式：直接通过style修改，记得取消scope</li>
            </ul>
        </section>
        <section class="select" >
            <manage-public-select> 
                <template slot="searchContent">            
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-row>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作人员">
                                        <el-select v-model="form.region" placeholder="请选择所属机构" style="width:100%">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作日期">
                                        <el-date-picker v-model="form.date" type="date" placeholder="请选择操作日期"> </el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="菜单名称">
                                        <el-input v-model="form.name"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-button style="float: right;" >查询结果</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </manage-public-select>
            <ul class="explain">
                <li>slot="buttonSearch" 可以删除</li>
            </ul>
        </section>
        <section class="select">
            <manage-public-select>
                <template slot="buttonSearch">
                    <el-button style="float: right;" >查询结果</el-button>
                    <el-button style="float: right;" >重置</el-button>
                </template>
                <template slot="searchContent">            
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-row>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作人员">
                                        <el-select v-model="form.region" placeholder="请选择所属机构" style="width:100%">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="操作日期">
                                        <el-date-picker v-model="form.date" type="date" placeholder="请选择操作日期"> </el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </manage-public-select>
            <ul class="explain">
                <li>slot="buttonSearch" 可以放置多个功能按钮</li>
            </ul>
        </section>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // 查询
             form: {
                name: '',
                region: '',
                date:""
            },
        }
    },
    
}
</script>
<style lang="scss" >
    .select{
        .el-date-editor.el-input, .el-date-editor.el-input__inner{
            width: 100%;
        }
    }

</style>